<template>
    <basic-layout class="walletDetails columnFlex" title="我的钱包" :showAddBtn="false">
        <!--  -->
        <van-cell-group id="cardWarp" inset>
            <van-cell :title="cardName" :value="'￥'+surplus" :label="cardNum" />
        </van-cell-group>
        <!--  -->
        <van-cell-group id="setUpBox" inset>
            <van-cell>
                <template #title>
                    <van-icon name="setting" />
                    <span class="custom-title">设置默认卡</span>
                </template>
                <template #right-icon>
                    <van-switch v-model="isSwitch" size="20px" @change="changeSwitch"  />
                </template>
            </van-cell>
        </van-cell-group>

        <div class="jymxTit"><span></span> 交易明细</div>
        <!-- 列表 -->
        <van-pull-refresh class="pullRefresh" v-model="refreshLoading" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished"
                :finished-text="listData.length ? '没有更多了' : ''"
                @load="onLoad">
                <van-cell-group class="cellCard" inset v-for="val in listData" :key="val.businessNo">
                    <van-cell>
                        <template #title>
                            {{val.transactionsTime}}
                        </template>
                        <template #label>
                            {{val.transactionsTypeName}}
                        </template>
                        <template #right-icon>
                            <span>￥{{val.transactionsAmount}}</span>
                        </template>
                    </van-cell>
                </van-cell-group>
            </van-list>
            <van-empty v-if="!loading && !listData.length" class="custom-image" :image="require('@/assets/images/empty.png')" description="暂无数据" />
        </van-pull-refresh>
    </basic-layout>
</template>

<script>
    import { setDefault } from "@/api/platframe/wallet/cardManage";
    import { cardDalance,transactionRecords } from "@/api/platframe/wallet/tradingCenter";
    export default {
        props: {

        },
        components: {

        },
        data () {
            return {
                cardName: null, // 卡名
                CardNum: null,// 卡号
                surplus: null, // 余额
                isSwitch: false,// 
                cardId: null, // 卡标记
                params: {
                    "cardNo": null,
                    "settlementId": null,
                    "beginTime": null,
                    "endTime": null,
                    "pageNum": 1,
                    "pageSize": 10,
                },
                loading: false,
                finished: false,
                refreshLoading: false,
                listData: []
            };
        },
        created () {
            let obj = JSON.parse(this.$route.query.params);
            this.cardName = obj.cardName;
            this.cardNum = obj.cardNo;
            this.cardId = obj.cardId;
            this.isSwitch = obj.isDefault === '1';
            this.params.cardNo = obj.cardNo;
            this.params.settlementId = obj.settlementId;
            console.log(obj);
            // 查询余额
            cardDalance({ "cardNo": obj.cardNo, "settleCenterId": obj.settlementId }).then(res=>{
                this.surplus = res.data.data;
            })
            this.takeNotes();
        },
        computed: {},
        mounted () {},
        watch: {},
        methods: {
            // 下拉刷新
            onRefresh() {
                this.refreshLoading = false;
                this.finished = false;
                this.listData = [];
                this.params.pageNum = 1;
                this.takeNotes();
            },
            // 通过分页获取交易信息
            takeNotes() {
                this.loading = true;
                transactionRecords(this.params).then((res) => {
                    this.loading = false;
                    if (res.code === 1000 && res.data) {
                        if (res.data.code == 200) {
                            this.listData = [...this.listData, ...res.data.data.records];
                            this.totalPage = res.data.data.total;
                            this.currentPage = res.data.data.pages;
                            if (this.listData.length >= res.data.data.total) {
                                this.finished = true;
                            } 
                        } else {
                            this.$Notify({ type: 'warning', message: res.data.msg });
                        }
                    }
                }).catch(() => {
                    this.loading = false;
                    this.finished = true;
                });
            },
            onLoad () {
                this.params.pageNum++;
                this.takeNotes();
            },
            // 设置默认卡
            changeSwitch() {
                setDefault({'cardId':this.cardId}).then(res=>{
                    if (res.code === 1000) {
                        this.$Notify({ type: 'success', message: '设置成功！' });
                    }
                });
            }
        }
    };
</script>

<style scoped lang="less">
.walletDetails ::v-deep .content {
    background-color: #ebebeb;
}
#cardWarp {
    height: 100px;
    margin-top: 10px;
    background-image: linear-gradient( to right bottom,#4c7dfe,#4c7dfe, #34abef, #20d7df );
    .van-cell {
        background-color: transparent;
        color: #f4feff;
        font-size: 16px;
        .van-cell__label {
            margin-top: 10px;
            color: #f4feff;
            font-size: 14px;
        }
    }
    .van-cell__value {
        color: #f4feff;
        font-size: 16px;
    }
}
#setUpBox {
    margin-top: 10px;
    .van-icon {
        font-size: 16px;
        color: #34abef;
        margin-right: 8px;
    }
}
.jymxTit {
    font-weight: 800;
    font-size: 15px;
    line-height: 30px;
    color: #333;
    margin: 16px 16px 10px;
    span {
        border: 1px solid #2647a8;
        margin-right: 6px;
    }
}
.pullRefresh .cellCard {
    margin-bottom: 10px;
    .van-cell > span {
        color: #2560a2;
    }
}
</style>